<template>
    <div class="position-menu">
      <div :class="{'position-menu-item':true, 'active': menuFlag=='1'}" @click="toggle1"><div class="position-menu-text">{{leftText}}</div></div>
      <div  :class="{'position-menu-item':true, 'active': menuFlag=='2'}" @click="toggle2"><div class="position-menu-text">{{rightText}}</div></div>
      <div class="clear"></div>
    </div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
       			 menuFlag: '1'             //   这里默认的是1
			}
		},
    created(){
      this.menuFlag = this.dis;     //   取得路径中传递过来的menuFlag参数
    },
    props:{
      leftText:{
        type: String,
        default: '左'
      },
      rightText:{
        type: String,
        default: '右'
      },
      dis:{
        type:String,
        default:'1'
      }
    },
		methods: {
     toggle1(){
       if(this.menuFlag == '1'){
         return
       }else{
         this.menuFlag = '1'
       }
       this.$root.eventHub.$emit('toggle',this.menuFlag)
     },
      toggle2(){
        if(this.menuFlag =='2'){
          return
        }else{
          this.menuFlag = '2'
        }
        this.$root.eventHub.$emit('toggle',this.menuFlag)
      }
      }
	}
</script>

<style type="text/css" scoped>
	.position-menu{
		margin-top: 10px;
	}
</style>
